<template>
    <!-- 组件效果 单独测试：快速原型开发 vue serve ./src/components/Pager/test.vue -->
  <div class="test-container">
    <div class="item" v-for="t in types" :key="t">
      <Icon :type="t"/>
      <label>{{t}}</label>
    </div>
  </div>
</template>

<script>
import Icon, {types} from "./"
export default {
  name:"App", // 如果在组件没有在注册的时候没有指定名字，则使用该名字 
  components:{Icon},
  data:()=>({
   types,
  }),
}
</script>
<style lang="less">
.test-container {
  display: flex;
  justify-content: center;
  margin: 30px auto;
  width: 580px;
  flex-wrap: wrap;
}
.item {
  margin: 1em;
  text-align: center;
}
.icon-container {
  display: block;
}
</style>
